<template>
  <div>
    <div class="commontop">
      <div class="commontop-left">
        <el-form :inline="true" :model="pages" ref="pages">
          <el-form-item prop="keyword">
            <el-input
              v-model="pages.keyword"
              placeholder="用户名、下载任务"
              clearable
              prefix-icon="el-icon-search"
            ></el-input>
          </el-form-item>
          <el-form-item prop="keyword">
            <el-select
              clearable
              v-model="pages.status"
              placeholder="请选择分类"
            >
              <el-option
                v-for="item in options2"
                :key="item.id"
                :label="item.title"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-button
            @click="SubmitBtnS"
            class="searchbgc"
            icon="iconfont icon-sousuo2"
            >搜索</el-button
          >
        </el-form>
      </div>
    </div>
    <el-table
      v-loading="isLoading"
      element-loading-text="玩命加载中"
      element-loading-spinner="el-icon-loading"
      :data="tableData"
      ref="multipleSelection"
      :header-cell-style="{ backgroundColor: '#3963fd', color: '#fff' }"
      style="width: 100%; margin-top: 20px"
    >
      <template slot="empty">
        <img src="@/assets/imgs/暂未数据.png" alt style="margin-top: 104px" />
        <p style="margin-top: 15px; margin-bottom: 104px">暂未有数据</p>
      </template>
      <el-table-column prop="id" label="ID" width="60"></el-table-column>
      <el-table-column
        prop="username"
        label="用户名"
        width="100"
      ></el-table-column>
      <el-table-column
        prop="task_name"
        label="下载任务"
        width="200"
      ></el-table-column>
      <el-table-column prop="detail" label="详情"></el-table-column>
      <el-table-column
        width="200"
        prop="created_at"
        label="生成时间"
      ></el-table-column>
      <el-table-column
        prop="duration"
        label="耗时"
        width="100"
      ></el-table-column>
      <el-table-column label="进度" width="90">
        <template slot-scope="scope">
          <el-tag v-if="tableData[scope.$index].status == 1" type="warning"
            >下载中</el-tag
          >
          <el-tag v-else-if="tableData[scope.$index].status == 2" type="success"
            >已完成</el-tag
          >
          <el-tag v-else-if="tableData[scope.$index].status == 3" type="danger"
            >下载失败</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column label="操作" width="90px">
        <template slot-scope="scope">
          <a
            :href="scope.row.download_url"
            v-if="tableData[scope.$index].status == 2"
            :headers="headers"
            ><el-button class="green" size="mini">下载</el-button></a
          >
          <el-button
            @click="Submit(scope.row)"
            v-else-if="tableData[scope.$index].status == 3"
            class="warning"
            size="mini"
          >
            重新下载</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="current_page"
        :page-sizes="pageSizeArr"
        :page-size="pages.per_page"
        layout="total, sizes, prev, pager, next"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { downloadJob, reDownload } from "@/api/login/index";
import commonInfo from "@/utils/common";
export default {
  data() {
    return {
      tableData: [],

      pages: {
        per_page: 10,
        page: 1,
        keyword: "",
        status: "",
      },
      //表格页面
      pageSizeArr: JSON.parse(JSON.stringify(commonInfo.pageSizeArr)),
      current_page: 1,
      total: 0,
      isLoading: true,

      /* 头部 */
      headers: {
        Authorization: localStorage.getItem("token"),
      },
      //时间日期
      /* 选择分类 */
      options2: [
        { id: 1, title: "下载中" },
        { id: 2, title: "已完成" },
        { id: 3, title: "下载失败" },
      ],
    };
  },
  methods: {
    //分页
    handleCurrentChange(val) {
      console.log(val);
      this.current_page = val;
      this.pages.page = val;
      console.log(this.pages);
      this.loadData(this.pages);
    },
    //分页
    handleSizeChange(val) {
      console.log(val);

      this.pages.per_page = val;
      console.log(this.pages);
      this.loadData(this.pages);
    },
    async loadData(num) {
      let res = await downloadJob(num);
      console.log(res);
      this.tableData = res.data.data.data;
      this.isLoading = false;
      this.total = res.data.data.total;
      this.current_page = res.data.data.current_page;
    },
    async Submit(row) {
      console.log(row);

      this.$message({
        showClose: true,
        duration: 3000,
        message: "已重新下载~",
        type: "success",
      });
      let id = row.id;
      let part_company_id = row.part_company_id;
      let res = await reDownload({ id, part_company_id });
      console.log(res);
      this.loadData(this.pages);
    },
    //提交选择模块
    async SubmitBtnS() {
      // 显示loading
      this.pages.page = 1;
      this.pages.per_page = 10;
      this.current_page = 1;
      this.$loading();
      console.log(this.pages);
      let res = await downloadJob(this.pages);
      console.log(res);
      this.tableData = res.data.data.data;
      this.total = res.data.data.total;
      this.pages.current_page = res.data.data.current_page;
      this.$loading().close();
    },
  },
  created() {
    this.loadData();
  },
};
</script>

<style scoped lang="less">
/deep/.el-table__header {
  margin-bottom: 20px;
}
/deep/.el-table {
  background-color: #f3f5fb;
}
/deep/.el-table .cell {
  display: flex;
}
/deep/.el-button--mini {
  /*  font-size: 18px !important; */
  padding: 7px 5px;
  margin: 0 3px;
}
/deep/.commontop-left .el-input {
  width: 100%;
}
/deep/.commontop-left .el-form-item {
  margin-bottom: 0px;
}
/deep/.el-table th.el-table__cell > .cell {
  text-align: center;
}
/deep/.el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
  border-right: 1px solid #ebeef5;
}
.warning {
  font-size: 12px !important;
}
</style>